<template>
  <div class="flex viewbox">
    <div class="view_left flexcenter">
      <div class="flexcenter full_w left_inner">
        <div class="l_codebox flexcolumn aligncenter justifycenter">
          <img src="@/assets/images/icon1.png" alt="" class="mb_15">
          <span class="c_999">扫二维码体验活动</span>
        </div>
      </div>
      <iframe
        src="https://sisvu.mobile.yfpoll.com/vote?id=3005&type=1"
        frameborder="0"
        width="100%"
        height="100%"
      ></iframe>
    </div>
    <div class="view_right">
      <div class="flexend">
        <i class="el-icon-close f-22 c_000 commhover" @click="handleclose"></i>
      </div>
      <div class="r_center">
        <el-tabs v-model="activeName" @tab-click="handleClick" stretch class="viewtab">
          <el-tab-pane label="H5打开" name="first">
            <div class="flexcolumn aligncenter">
              <img
                src="@/assets/images/icon1.png"
                alt=""
                class="codebox mt_42 mb_15"
              />
              <div class="c_606 mb_15">微信扫一扫预览效果</div>
              <div class="downbox flexcenter mb_30 commhover c_000">
                <i class="el-icon-download f-22"></i>
                下载二维码
              </div>
              <el-input
                v-model="link1"
                readonly
                class="appendbg mb_30"
              >
                <template slot="append">
                  <span
                    class="commhover"
                    v-clipboard:copy="link1"
                    v-clipboard:success="clipboardSuccess"
                  >复制</span>
                </template>
              </el-input>
              <span class="c_999">您可以将活动链接复制到您的公众号菜单或自定义回复中</span>
            </div>
          </el-tab-pane>
          <el-tab-pane label="小程序打开" name="second">
            <div class="flexcolumn aligncenter">
              <img
                src="@/assets/images/icon1.png"
                alt=""
                class="codebox mt_42 mb_10"
              />
              <div class="c_606 mb_30">微信扫一扫预览效果</div>
              <div class="downbox flexcenter mb_30 commhover">
                <i class="el-icon-download f-22"></i>
                下载二维码
              </div>
              <div class="c_000 full_w">小程序APPID</div>
              <el-input
                v-model="link1"
                readonly
                class="appendbg mb_15"
              >
                <template slot="append">
                  <span
                    class="commhover"
                    v-clipboard:copy="link1"
                    v-clipboard:success="clipboardSuccess"
                  >复制</span>
                </template>
              </el-input>
              <div class="c_000 full_w">小程序活动路径</div>
              <el-input
                v-model="link1"
                readonly
                class="appendbg mb_15"
              >
                <template slot="append">
                  <span
                    class="commhover"
                    v-clipboard:copy="link1"
                    v-clipboard:success="clipboardSuccess"
                  >复制</span>
                </template>
              </el-input>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="flexend footer">
        <el-button type="primary" @click="submit" class="mr_40">马上发布</el-button>
        <el-button plain type="primary" @click="handleclose">进入编辑</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      link1:'https://nbonxs.axshare.com/#id=1vss6q&p=%E6%B4%BB%E5%8A%A8%E7%AE%A1%E7%90%86&g=1'
    };
  },

  methods: {
    handleclose() {
      this.$emit("close");
    },

    handleClick() {},

    clipboardSuccess() {
      this.$modal.msgSuccess("复制成功");
    },

    submit(){
        this.$modal.msgSuccess("复制成功");
    }
  },
};
</script>

<style lang="scss" scoped>
.viewbox {
  height: 680px;
}
.view_left {
  width: 345px;
  height: 100%;
  background-color: #eee;
  position: relative;
  cursor: pointer;

  .left_inner{
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba($color: #000000, $alpha: 0.5);
  }

  .l_codebox{
    width: 242px;
    background-color: #fff;
    padding: 32px;

    img{
      width: 178px;
      height: 178px;
    }
  }
}
.view_left:hover .left_inner{
  display: flex;
}
.view_right {
  width: 655px;
  height: 100%;
  padding: 20px;
}
.r_center {
  width: 78%;
  margin: auto;
  height: calc(100% - 72px);
}
.codebox {
  width: 180px;
  height: 180px;
}
.downbox {
  border: 1px solid #ccc;
  padding: 4px 15px;
}
.footer{
    border-top: 1px solid #eee;
    height: 60px;
}
</style>
<style lang="scss">
.appendbg{
  .el-input-group__append{
    background-color: white;
    color: #4A73FF;
  }
}
.viewtab{
  .el-tabs__nav-wrap::after{
    height: 10px;
    background-color: #fff;
    border: 1px solid #DFDFDF;
    border-radius: 10px;
  }
  .el-tabs__item{
    height: 50px;
  }
  .el-tabs__active-bar{
    height: 10px;
    border-radius: 10px;
  }
}
</style>